<template>
  <div class="order-management">

    <!-- 日志-数据展示层 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选列 -->
      <el-table-column type="selection" width="55" />

      <!-- 日志编号 -->
      <el-table-column prop="id" label="日志编号" width="100" />

      <!-- 操作人员 -->
      <el-table-column prop="name" label="操作人员" width="120" />

      <!-- 操作时间 -->
      <el-table-column prop="logTime" label="操作时间" width="160" />

      <!-- IP地址 -->
      <el-table-column prop="ip" label="IP地址" width="140" />

      <!-- 请求方式 -->
      <el-table-column prop="method" label="请求方式" width="120" />

      <!-- 操作类型 -->
      <el-table-column label="操作类型" width="150">
        <template slot-scope="scope">
          <el-tag
            :type="getTypeTagType(scope.row.type)"
            size="small"
            disable-transitions
          >{{ scope.row.type }}</el-tag>
        </template>
      </el-table-column>

      <!-- 日志内容（省略显示） -->
      <el-table-column label="日志内容">
        <template slot-scope="scope">
      <span style="display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;">
        {{ scope.row.log }}
      </span>
        </template>
      </el-table-column>

    </el-table>


    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15]"
      :page-size="queryPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      prev-text="上一页"
      next-text="下一页"
    />



  </div>
</template>

<script>
import { findAllByPage } from '@/api/log'
export default {
  name: 'Syslog',
  data() {
    return {
      //复选框
      multipleSelection:[],
      title:'',
      // 搜索栏
      // 查询表单
      searchForm: {
        name: '',
        ip: '',
        createTime: []
      },
      // 分页参数
      queryPage: {
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      currentPage: 1,
      pageNum: 1,
      pageSize: 10,
      total: 0,
    }
  },
  created() {
    this.loadData();
  },

  methods: {
    // 返回操作类型对应的 tag 类型
    getTypeTagType(type) {
      switch (type) {
        case '查询':
          return 'success'; // 绿色
        case '新增':
          return 'warning'; // 黄色
        case '修改':
          return 'danger';  // 红色
        default:
          return 'info';    // 默认灰色
      }
    },
    //select方法监控
    handleSelectionChange(val){
      this.multipleSelection = val.map(item => item.id)
    },

    //分页-页码大小改变
    handleSizeChange(newSize) {
      this.queryPage.pageSize = newSize
      this.loadData()
    },
    //分页-当前页码数改变
    handleCurrentChange(page){
      this.queryPage.pageNum = page;
      this.loadData();
    },
    // 加载数据
    loadData(){
      findAllByPage(this.queryPage).then(res=>{
        if(res.code == 20000){
          console.log(res)
          this.tableData = res.data.list;
          this.total = res.data.total
        }else{
          this.$message.error(res.message);
        }
      })
    },
  },

}
</script>


<style scoped lang="scss">
.order-management {
  padding: 20px；
}
</style>
